<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Test</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }

        html,
        body {
            height: 100%;
            position: relative;
        }

        #vr {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #666666;
        }
    </style>

    <script src="../libs/three.min1.js"></script>
    <script src="../dist/vrpanoramic.min.js"></script>

</head>

<body>
    <div id="vr"></div>
</body>

<script>

    // 全景
    const $panoramic = new VrPanoramic('vr', {});

    console.log('panoramic', $panoramic);

    // 设置全景图片
    $panoramic.loadPanoramic('./images/vr1.jpg');

    // 设置logo
    $panoramic.loadLogo('./images/logo.png');

    // 标记
    const $label = new VrPanoramic.Labels({
        content: "智石科技"
    });

    // $label.on('click', () => {
    //     console.log('click');
    // });

    // // div marker
    // const $marker = new brtmap.VrPanorama.DivMarker({
    //     content: "<div>智石科技</div>"
    // }).addTo($panorama);

    // //
    // // $marker.on('click', e => {
    // //     console.log('e', e);
    // // });

    // console.log('$marker', $marker);

    let index = 2;
    // click
    $panoramic.on('click', e => {

        //
        $panoramic.clearLogo();

        // const img = document.createElement('img');
        // img.src = $panoramic.toDataURL();

        // document.body.appendChild(img);

        //
        // if (e.vector3) {
        //     console.log('e.vector3', e.vector3);
        //     $label.setCoords(e.vector3).addTo($panoramic);
        //     //
        //     $panoramic.animateTo({
        //         center: e.vector3,
        //         duration: 500
        //     });
        // }

        // $label.setCoords();

        // if (index === 2) {
        //     index = 1;
        //     // 设置全景图片
        //     $panoramic.loadPanoramic('./images/vr1.jpg', { theta: 90, autoplay: 0.5 });
        // }
        // else {
        //     index = 2;
        //     // 设置全景图片
        //     $panoramic.loadPanoramic('./images/vr2.jpg', { theta: 90 });
        // }

        // console.log('e', e);
        // //
        // if (e.vector3) {
        //     //
        //     $marker.show().setCoords(e.vector3.x, e.vector3.y, e.vector3.z);
        // }

        // // setTimeout(() => {
        // //     $panorama.deactivated();
        // // }, 2000);

    });

    function change() {
        if (index === 2) {
            index = 1;
            // 设置全景图片
            $panoramic.loadPanoramic('./images/vr1.jpg', { theta: 90, autoplay: 0.5 });
        }
        else {
            index = 2;
            // 设置全景图片
            $panoramic.loadPanoramic('./images/vr2.jpg', { theta: 90 });
        }
    }

    // function rotatePoint(point, axis, theta, phi) {
    //     // point为三维点的坐标，axis为旋转轴心的坐标，theta为绕x轴旋转角度，phi为绕z轴旋转角度
    //     const [x, y, z] = point;
    //     const [a, b, c] = axis;
    //     // 将旋转轴心移动到原点
    //     const x1 = x - a;
    //     const y1 = y - b;
    //     const z1 = z - c;
    //     // 绕x轴旋转theta角度
    //     const x2 = x1;
    //     const y2 = y1 * Math.cos(theta) - z1 * Math.sin(theta);
    //     const z2 = y1 * Math.sin(theta) + z1 * Math.cos(theta);
    //     // 绕z轴旋转phi角度
    //     const x3 = x2 * Math.cos(phi) - y2 * Math.sin(phi);
    //     const y3 = x2 * Math.sin(phi) + y2 * Math.cos(phi);
    //     const z3 = z2;
    //     // 将旋转后的点平移回原来的位置
    //     const x4 = x3 + a;
    //     const y4 = y3 + b;
    //     const z4 = z3 + c;
    //     return [x4, y4, z4];
    // }
</script>

</html>